<!DOCTYPE html>
<html>
<head>
	<title>Basic LightFace Test</title>
	<style>
		@import "../Assets/lightface.css";
	</style>
	<link rel="stylesheet" href="../Assets/LightFace.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"></script>
	<script src="../Source/LightFace.js"></script>
	<script src="../Source/LightFace.js"></script>
	<script src="../Source/LightFace.IFrame.js"></script>
	<script src="../Source/LightFace.Image.js"></script>
	<script src="../Source/LightFace.Request.js"></script>
	<script>
		window.addEvent('domready',function(){
			
			var index = 0;
			var images = [
				'worldcup-post-tx3.jpg',
				'http://davidwalsh.name/dw-content/slideshow/cricci1.jpg',
				'http://davidwalsh.name/dw-content/slideshow/cricci2.jpg',
				'http://davidwalsh.name/dw-content/slideshow/cricci3.jpg',
				'http://davidwalsh.name/dw-content/slideshow/cricci4.jpg',
				'http://davidwalsh.name/dw-content/slideshow/cricci5.jpg'
			];
			light = new LightFace.Image({
				title: 'Image ' + (index + 1),
				fadeDuration: 100,
				//fadeDelay: 400,
				keys: {
					left: function() {
						if(index!= 0) this.load(images[--index],'Image ' + (index + 1));
					},
					right: function() {
						if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1));
					},
					esc: function() {
						this.close();
					}
				}
			});
			
			document.id('start').addEvent('click',function() {
				load = light.load(images[0],'Image 1').open();
			});
			
		});
	</script>
</head>
<body>
	
	<h3>Gallery Demo</h3>
	<p>
		Click the button below to launch it and make it happen.
	</p>
	
	<button id="start">Start Show</button>

</body>
</html>